<template>
<!-- :storage="true" -->
  <div id="app">
    <avue-form-design 
      style="height: 100vh;"
      :options="options"
      @submit="handleSubmit"
      :custom-fields="customFields">
    </avue-form-design>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      tplId: '',
      tempFormId: '',
      customFields: [
      ],
      options: {
      },
    }
  },
  mounted() {
    this.tplId = this.getQueryString('id')
    this.tempFormId = this.getQueryString('tempFormId')
    if (this.tempFormId || this.tplId) {
      this.getJsonDetail()
    }
  },
  methods: {
    // 获取模板配置详情
    getJsonDetail() {
      fetch(`/api/form-enginee/formConfig/getById/${this.tempFormId || this.tplId}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        },
      }).then(data => {
        return data.json()
      }).then(result => {
        // console.log(result, 'result>>>')
        if (result.code === 0) {
          this.options = JSON.parse(result.data.configMetadata)
        }
      })
    },
    handleSubmit(val) {
      this.$message.success("查看控制台")
      console.log(val)
    },
    getQueryString(name) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      let r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURIComponent(r[2]);
      };
      return null;
    }
  }
}
</script>
<style>
body {
  margin: 0;
}
</style>
